<script>
  import { createEventDispatcher } from "svelte";
  import { createPopper } from "@popperjs/core";
  import ScrollView from "./ScrollView.svelte";

  const dispatch = createEventDispatcher();
  const submit = () => dispatch("submit");

  let selectVisual, ttSelectTooltip, ttSelect, scrollView;
  export let value = "";
  export let data = [];
  export let placeholder = "";
  function onSelectFocus() {
    selectVisual.focus();
    ttSelectTooltip.style.display = "block";
    createPopper(ttSelect, ttSelectTooltip, {
      placement: "bottom",
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [42, 10],
          },
        },
      ],
    });
    setTimeout(() => {
      scrollView.refresh();
    }, 100);
  }
  function getLabel(value) {
    if (value) {
      return data.find((data) => data.value === value)?.label;
    }
    return "";
  }
  function onClear(e) {
    e.stopPropagation();
    value = "";
    submit();
  }
  function onHide() {
    ttSelectTooltip.style.display = "none";
  }
  function onSelecOption(option, e) {
    e.preventDefault();
    selectVisual.focus();
    value = option.value;
    e.target?.addEventListener("mouseup", onSelectOptionFinished);
    e.target?.addEventListener("touchstart", onSelectOptionFinished);
  }
  function onSelectOptionFinished(e) {
    submit();
    e.target?.removeEventListener("mouseup", onSelectOptionFinished);
    e.target?.removeEventListener("touchstart", onSelectOptionFinished);
    onHide();
  }
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="tt-select w-72" bind:this={ttSelect} on:click={onSelectFocus}>
  <div class="tt-select-inner">
    {#if value}
      <span>{getLabel(value)}</span>
    {:else}
      <span class="text-gray-400">{placeholder || "请选择"}</span>
    {/if}
  </div>
  <select bind:this={selectVisual} on:blur={onHide} class="tt-select-visual" />
  {#if value}
    <button
      class="btn btn-xs btn-circle btn-outline grow"
      on:click={onClear}
      style="transform: scale(0.5)"
    >
      x
    </button>
  {:else}
    <svg
      class="select-icon"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 20 20"
    >
      <g fill="none">
        <path
          d="M15.854 7.646a.5.5 0 0 1 .001.707l-5.465 5.484a.55.55 0 0 1-.78 0L4.147 8.353a.5.5 0 1 1 .708-.706L10 12.812l5.147-5.165a.5.5 0 0 1 .707-.001z"
          fill="currentColor"
        />
      </g>
    </svg>
  {/if}
</div>
<div
  bind:this={ttSelectTooltip}
  class="tt-selct-tooltip card w-96 bg-base-100 shadow-xl max-h-96"
  role="tooltip"
>
  <ScrollView height={64 * 3} bind:this={scrollView}>
    <div class="scroll-content py-4">
      {#each data as option}
        <div
          class="tt-option px-4"
          on:mousedown={(e) => onSelecOption(option, e)}
        >
          <span>{option.label}</span>
        </div>
      {/each}
    </div>
  </ScrollView>
</div>

<style>
  .tt-select {
    @apply select;
    @apply select-primary;
    @apply max-w-xs;
    flex-shrink: 1;
    align-items: center;
    background-image: none;
    padding-right: 1rem;
  }

  .select-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .tt-select-lg {
    @apply input-lg;
    padding-right: 1.5rem;
  }
  .tt-select-md {
    @apply input-md;
    padding-right: 1rem;
  }
  .tt-select-sm {
    @apply select-sm;
    padding-right: 0.75rem;
  }
  .tt-select-disabled {
    @apply select-disabled;
    cursor: not-allowed;
  }
  .tt-select-disabled select {
    cursor: not-allowed;
  }

  .tt-select-lg {
    @apply select-lg;
  }
  .tt-input-md {
    @apply select-md;
  }
  .tt-input-sm {
    @apply select-sm;
  }
  .tt-select-inner {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tt-select-visual {
    width: 0;
    height: 0;
  }
  .tt-select:has(.tt-select-visual:focus) {
    @apply select-primary;
  }
  .tt-select.tt-select-success:has(.tt-select-visual:focus) {
    @apply select-success;
  }
  .tt-select.tt-select-info:has(.tt-select-visual:focus) {
    @apply select-info;
  }
  .tt-select.tt-select-warning:has(.tt-select-visual:focus) {
    @apply select-warning;
  }
  .tt-select.tt-select-error:has(.tt-select-visual:focus) {
    @apply select-error;
  }
  .tt-selct-tooltip {
    display: none;
    z-index: 1000;
  }
  .tt-option,
  .tt-option-md {
    height: 3rem;
    line-height: 3rem;
    user-select: none;
  }
  .tt-option-lg {
    height: 4rem;
    line-height: 4rem;
  }
  .tt-option-sm {
    height: 2rem;
    line-height: 2rem;
  }
  .tt-option:not(.tt-option-disabled):hover {
    @apply text-primary;
    @apply bg-primary;
    --tw-bg-opacity: 0.05;
    cursor: pointer;
  }
  .tt-option-disabled {
    @apply text-gray-400;
  }
</style>
